<template>
  <view class="container">
    <z-paging-swiper>
      <view>
        <z-paging
          ref="paging"
          @scroll="handleScroll"
          v-model="itemList"
          @query="queryList"
          :fixed="true"
          :auto="false"
          :empty-view-img="`${getImageUrl('empty.png')} `"
          empty-view-text="暂无数据~"
          :empty-view-img-style="imgStyle"
        >
          <view>
            <u-navbar
              backIconColor="#fff"
              title-size="36"
              title-color="#fff"
              title="购物商城"
              :background="scrollTop >= 10 ? background1 : background"
              :border-bottom="false"
            >
            </u-navbar>
            <view style="position: relative; height: 200rpx">
              <view
                class="contentBg dis-flex flex-x-bottom"
                :style="{
                  paddingTop: `${statusBarHeight + navbarHeight}px`,
                  backgroundImage: `url(${getImageUrl('bg.png')})`,
                  height: `${158 + statusBarHeight}px`,
                  top: `-${statusBarHeight + navbarHeight}px`
                }"
              >
                <view class="searchView flex-1" @click="onSearch">
                  <u-search
                    placeholder="搜索所需商品"
                    height="64"
                    :show-action="false"
                    style="opacity: 0.6"
                  ></u-search>
                </view>
              </view>
              <view class="contentBanner">
                <Banner :bannerList="bannerList" />
              </view>
            </view>
          </view>
          <view class="specialBanner">
            <!-- <Special :ggList="ggList"></Special> -->
          </view>
          <!-- <view class="cate-content">
            <view @click="onMenuPath(item)" v-for="(item,index) in menuListnn" :key="index"
              class="type-nav">
              <view class="cate-item">
                <u-image class="" :src="item.iconUrl" height="90rpx" width="90rpx"></u-image>
                <view class="cate-name">{{item.name}}</view>
              </view>
            </view>
          </view> -->
          <u-gap height="20"></u-gap>

          <GoodsBox :itemList="itemList"></GoodsBox>
        </z-paging>
      </view>
    </z-paging-swiper>
  </view>
</template>

<script>
import { BASE_URL } from '@/common/config.js'
import Banner from '@/components/banner/index.vue'
import GoodsBox from './components/goods_box.vue'

let systemInfo = uni.getSystemInfoSync()
export default {
  components: {
    Banner,
    GoodsBox
  },
  data() {
    return {
      statusBarHeight: systemInfo.statusBarHeight,
      progress: 0,
      uploadPopup: false,

      showSelect: false,
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      bannerList: [],
      ggList: [],
      BASE_URL,
      imgStyle: {
        width: '12rem'
      },
      bannarList: [],
      menuListnn: [],
      itemList: [],
      scrollTop: 0
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  onLoad() {
    this.$u.get('/app-api/cms/qlink/top-list?identify=mall_carousel&limit=6').then((res) => {
      this.bannerList = res.data
    })
    this.$u
      .get('/app-api/shop/category/list', {
        parentCode: 'mall'
      })
      .then((res) => {
        res.data.forEach((item, index) => {
          if (index <= 8) this.menuListnn.push(item)
        })
        this.menuListnn.push({
          name: '更多',
          code: 'distributor_more',
          iconUrl: '/static/gd.png'
        })
      })
  },
  onShow() {
    this.queryList()
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    onBanner(e) {
      if (this.bannarList[e].linkUrl.includes('http')) {
      } else {
        uni.navigateTo({
          url: this.bannarList[e].linkUrl
        })
      }
    },

    onAllGoods() {
      this.$utils.route('/goods/all-goods/all-goods')
    },

    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      this.queryList()
    },

    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/product/spu/page', {
          pageNo,
          pageSize,
          platformCategoryCode: 'mall'
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },
    onMenuPath(item) {
      let url = ''
      if (item.code && item.code == 'distributor_more') url = '/shops/category'
      else url = '/shops/cate-list?cate=' + JSON.stringify(item)
      uni.navigateTo({
        url: url
      })
    },
    onSearch() {
      this.$utils.route({
        url: '/goods/goods-search/goods-search'
      })
    },
    routeTo(item) {
      //todo
      if (item.key == 'waimai') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else {
        uni.navigateTo({
          url: '/other/merchant-center/merchant-center?id=' + item.id
        })
      }
    }
  }
}
</script>

<style scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.cate-left {
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}

.specialBanner {
  margin-top: 200rpx;
}

.cate-content {
  margin: 0 20rpx;
  background-color: #fff;
  padding-bottom: 30rpx;
  /* height: 200rpx; */
  border-radius: 10rpx;
}

.type-nav {
  display: inline-block;
  /* margin-right: 22rpx; */
  text-align: center;
  height: 100%;
  width: 20%;
  padding-top: 30rpx;
}

.type-nav:last-child {
  margin-right: 0;
}

.cate-name {
  margin-top: 20rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
}

.cate-item {
  display: flex;
  align-items: center;
  flex-flow: column;
  height: 100%;
  justify-content: center;
}

.contentBanner {
  width: 100%;
  position: absolute;
  top: 110rpx;
}

.top-bar {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  color: #fff;
}

.location {
  position: absolute;
  left: 20rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  top: 30rpx;
  color: #fff;
}

.nav-bar-cat {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 35rpx;
}

.app-nav-bar-cat {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 35rpx;
  display: flex;
  justify-content: center;
  text-align: center;
}

.msg {
  position: absolute;
  right: 20rpx;
}

.msg-box {
  position: relative;
}

.selcet-banner {
  width: 500rpx;
  display: flex;
  justify-content: space-around;
  margin: 15rpx 0;
}

.selcet-box {
  padding: 10rpx 20rpx;
  background-color: #ffffff;
  border-radius: 5rpx;
}

.category {
  width: 500rpx;
  display: flex;
  justify-content: space-around;
  font-size: 40rpx;
}

.selcet-banner {
  display: flelx;
}

.sale-item {
  font-size: 24rpx;
  color: #666666;
  /* margin-right: 50rpx; */
}

.goods-star {
  font-size: 30rpx;
  color: #333333;
  margin-left: 8rpx;
}

.navView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 20rpx;
}

.menu-icon {
  width: 70rpx;
  height: 70rpx;
}

.plate-type-box {
  margin: 30rpx 0 0 20rpx;
}

.plate-item {
  margin-right: 50rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  flex-flow: column;
}

.checked {
  font-weight: 500;
  font-size: 30rpx;
  color: #333333;
}

.plate-item-image {
  width: 36rpx;
  height: 8rpx;
  margin-top: 10rpx;
}

.tabs-box {
  margin: 20rpx;
}

.tabs-box-item {
  width: 128rpx;
  height: 44rpx;
  background: #ffffff;
  border-radius: 22rpx;
  margin-right: 20rpx;
  line-height: 44rpx;
  text-align: center;
  font-size: 24rpx;
  color: #666666;
}

.tabs-checked {
  background: #10a28f;
  color: #ffffff;
}

.goods_area {
  /* display: flex; */
  /* 	flex-wrap: wrap;
    align-content: flex-start; */
}

.goods_box {
  /* width: 100%; */
  background: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 0 20rpx;
  margin-bottom: 20rpx;
}

.goods_title {
  font-size: 30rpx;
  color: #333333;
}

.laba {
  font-size: 20rpx;
  color: #999999;
  padding: 30rpx 0 10rpx 0;
}

.goods_price {
  font-size: 25rpx;
  color: red;
  display: flex;
}

.price_tip {
  font-size: 35rpx;
}

.sales-volume1 {
  color: #999999;
}

.price_main {
  font-size: 36rpx;
}

.price_dot {
  align-self: flex-end;
}

.goods_tip {
  width: 110rpx;
  height: 40rpx;
  border-radius: 20rpx;
  border: 1px solid #fa453c;
  line-height: 40rpx;
  text-align: center;
  font-size: 20rpx;
  color: #fa453c;
}

.goods_old_price {
  color: #89898a;
}

.storeName {
  font-size: 26rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 98px;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: -4rpx;
}

.cabinetName {
  height: 30rpx;
  background: #ffffff50;
  border-radius: 5rpx;
  padding: 0px 10rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
  margin-right: 10rpx;
}

.searchView {
  z-index: 10;
  margin: 20rpx 0 10rpx 0;
  padding: 0px 20rpx;
  width: 856rpx;
}

.tabView {
  display: flex;
  flex-direction: row;
}

.tabMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx 20rpx;
  font-size: 35rpx;
  font-weight: 400;
  color: #ffffff;
}

.tabLine {
  margin: 10rpx 0;
  width: 35rpx;
  height: 6rpx;
  background: #ffffff;
  border-radius: 3rpx;
}

.bannarView {
  display: flex;
  flex-direction: column;
  margin: 10rpx 20rpx;
}

.menuView {
  display: flex;
  flex-direction: column;
  margin: 0px 20rpx;
  margin-top: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  padding: 15rpx 0px;
}

.menuText {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}

.merchant {
  display: flex;
  flex-direction: column;
  margin: 20rpx;
  padding: 0 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
}

.merchant-title {
  padding: 30rpx 0;
  display: flex;
  align-items: center;
}

.sectionTitle {
  font-size: 36rpx;
  font-weight: bold;
  color: #84715e;
  background: linear-gradient(9deg, #f84443 0%, #ff946a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.endView {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 45rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-left: 30rpx;
}

.endTitle {
  color: #333333;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 24rpx;
  padding: 0px 10rpx;
}

.endTime {
  color: #e84738;
  font-size: 24rpx;
  padding: 0px 10rpx;
}

.merchant-title-right {
  display: flex;
  flex-direction: row;
}

.sectionText {
  font-size: 26rpx;
  font-weight: 400;
  color: #666;
  margin-right: 10rpx;
}

.scrollView {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.merchant-box {
  display: flex;
  align-items: center;
}

.merchant-box-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  border: 1px solid #f6f6f6;
}

.merchant-name {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}

.goodsTitle {
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  margin: 0px 8rpx;
  margin-top: 10rpx;
}

.goodsoPrice {
  font-size: 18rpx;
  color: #cccccc;
  text-decoration: line-through;
  margin: 0px 8rpx;
  margin-top: 10rpx;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10rpx 8rpx;
}

.goodsPrice {
  flex: 1;
  font-size: 24rpx;
  font-weight: bold;
  color: #ff2323;
}

.goodsRowView {
  display: flex;
  flex-direction: row;
  margin: 0px 20rpx;
}

.timeView {
  flex: 1;
  max-width: 400rpx;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin-right: 20rpx;
  padding: 20rpx;
}

.timeHeadView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.timeTitle {
  font-size: 30rpx;
  font-weight: bolder;
  color: #000;
}

.timeText {
  font-size: 20rpx;
  font-weight: 400;
  color: #ffffff;
  width: 110rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  background: #ff9300;
  border-radius: 20rpx 2rpx 16rpx 2rpx;
  margin-left: 20rpx;
}

.rowView {
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
}

.goodsView {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #f6f6f6;
  border-radius: 8rpx;
}

.goodsStock {
  font-size: 20rpx;
  font-weight: 300;
  color: #999999;
  margin: 10rpx 0px;
  margin-left: 8rpx;
}

.goodsPrice2 {
  font-size: 18rpx;
  font-weight: 300;
  color: #666666;
  margin-left: 8rpx;
  margin-bottom: 20rpx;
}

.goodsPrice2 text {
  font-size: 24rpx;
  font-weight: bold;
  color: #ff2323;
}

.videoView {
  flex: 0.6;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
}

.videoImage {
  width: 220rpx;
  height: 220rpx;
  background: #eeeeef;
  border-radius: 10rpx;
  overflow: hidden;
  margin-top: 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.playIcon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  opacity: 0.8;
  z-index: 10;
}

.boxView {
  display: flex;
  flex-direction: column;
  background: #eeeeef;
}

.choiceBoxView {
  display: flex;
  flex-direction: column;
  padding: 20rpx 30rpx;
  background: #eeeeef;
  z-index: 100;
  position: sticky;
  top: 0px;
}

.choiceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0rpx 30rpx;
  margin-top: 20rpx;
}

.choiceTitle {
  font-size: 40rpx;
  font-family: YouSheBiaoTiHei;
  color: #333333;
}

.choiceText {
  font-size: 20rpx;
  font-weight: 400;
  color: #ffffff;
  width: 110rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  background: #65be1a;
  border-radius: 20rpx 2rpx 16rpx 2rpx;
  margin-left: 20rpx;
}

.tabView2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tabAction {
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  background: #22b857;
  padding: 0px 15rpx;
  border-radius: 26rpx 6rpx 26rpx 6rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin-right: 40rpx;
}

.tabTitle {
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  padding: 0px 15rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
  margin-right: 40rpx;
}

.otherView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.otherView text {
  font-size: 26rpx;
  font-weight: 400;
  color: #666666;
  margin-right: 10rpx;
}

.itemListView {
  display: flex;
  flex-wrap: wrap;
  padding-left: 20rpx;
}

.itemView {
  width: calc(100% / 2 - 20rpx);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.itemTitle {
  font-size: 24rpx;
  font-weight: 400;
  color: #000000;
  margin: 15rpx;
}

.itemPriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 15rpx;
  margin-bottom: 20rpx;
}

.itemPrice {
  flex: 1;
  font-size: 26rpx;
  font-weight: bold;
  color: #ff2323;
}

.saleView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0px 20rpx;
  padding-bottom: 20rpx;
}

.saleItemView {
  display: flex;
  flex-direction: row;
  padding: 0px 20rpx;
  margin-top: 20rpx;
}

.saleInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}

.saleTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
}

.saleText {
  font-size: 24rpx;
  font-weight: 400;
  color: #ff6407;
  margin-top: 10rpx;
}

.saleNum {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 20rpx;
}

.salePriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
}

.salePrice {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #ff2323;
}

.salePrice text {
  font-size: 36rpx;
  font-weight: bolder;
  color: #ff2323;
}

.saleBtn {
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #22b857;
  border-radius: 25rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
}

.groupView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0px 20rpx;
  margin-top: 20rpx;
  overflow: hidden;
}

.groupTitleView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.groupTotal {
  width: 70rpx;
  height: 34rpx;
  line-height: 34rpx;
  text-align: center;
  background: #22b857;
  border-radius: 5rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
}

.groupTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 10rpx;
}

.groupText {
  font-size: 24rpx;
  font-weight: 400;
  color: #ff6407;
  padding: 0px 20rpx;
}

.groupPriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.groupPrice {
  font-size: 28rpx;
  font-weight: 400;
  color: #ff2323;
}

.groupPrice text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff2323;
}

.groupOPrice {
  flex: 1;
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #bababa;
  margin-left: 10rpx;
}

.groupBtn {
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  width: 150rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  background: #22b857;
  border-radius: 28rpx;
}

.popupView {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popupBoxView {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 500rpx;
  height: 580rpx;
}

.popupBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}

.popupContent {
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.popupTitle {
  font-size: 46rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-top: 60rpx;
}

.popupText {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-top: 20rpx;
}

.couponBox {
  background: #fdf8da;
  border-radius: 20rpx;
  margin: 0px 40rpx;
  margin-top: 20rpx;
}

.couponMoney {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  font-size: 28rpx;
  color: #ff5151;
  margin-top: 10rpx;
}

.couponMoney text {
  font-size: 69rpx;
  font-weight: bold;
  color: #ff5151;
  margin-right: 10rpx;
}

.couponLine {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.round {
  width: 30rpx;
  height: 30rpx;
  background: #ff5151;
  border-radius: 50%;
  margin-left: -15rpx;
  margin-right: -15rpx;
}

.couponLine2 {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent 50%, #ff5151 50%);
  background-size: 8px 100%;
}

.couponText {
  font-size: 24rpx;
  font-weight: 400;
  color: #787878;
  text-align: center;
  padding: 20rpx 0px;
}

.couponBtn {
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  background: linear-gradient(180deg, #fe9104, #ffcb87);
  box-shadow: 0px 11rpx 18rpx 0px rgba(35, 24, 21, 0.15);
  border-radius: 32rpx;
  margin: 0rpx 50rpx;
  margin-top: 50rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
}

.imageIcon {
  width: 60rpx;
  height: 60rpx;
  margin-top: 40rpx;
}

page {
  background: #eeeeef;
  height: 100%;
}

.slot-wrap {
  display: flex;
}

.store-image {
  position: relative;
}

.store-label {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 60rpx;
  height: 30rpx;
  background: #ed624f;
  border-radius: 10rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
  line-height: 30rpx;
}

/* 	::v-deep .u-mode-center-box {
  background: transparent !important;
}

::v-deep .z-paging-content-fixed,
.zp-loading-fixed {
  bottom: 0 !important;
} */

/*
::v-deep .my-swiper .uni-swiper-dots{
    position: absolute;
    bottom: 100rpx !important;
  } */
</style>
